<template>
  <div class="container">
    <img src="../assets/imgs/indexBg.jpg" alt="">
    <div class="rule">
      ① 这是一个线下快速游戏，创建房间设置参与人数、卧底及白板人数，进入房间；<br/>

      ② 创建好后，点击右上角邀请好友或者好友查找房间进入房间并及时准备，都准备好后，就可以开始游戏啦；<br/>

      ③ 每个人获得一张牌，点击此牌，得到你当局的词，根据提示顺序依次描述自己的词汇，所有人描述之后投票指认卧底；<br/>

      ④ 所有人投票完毕以后，若卧底还存活，剩余玩家继续描述，直至游戏终止<br/>

      输赢判定规则：<br/>

      游戏投票结束时，当卧底和白板全部被指出去后，则平民获胜。当最后两个人的时候，卧底或白板还存活，则卧底或白板胜利。。<br/>
    </div>
    <div class="block">
      <el-button type="success" @click="toPage('setting')">创建房间</el-button>
      <el-button type="success" @click="toPage('search')" plain>查找房间</el-button>
    </div>
  </div>
</template>

<script>
  import {GetQueryString} from '@/api/getQueryString';
export default {
  name: 'index',
  methods: {
    toPage (page) {
      this.$router.push({name: page})
    },
  },
  beforeCreate() {
    let room_id = GetQueryString('room_id')
    // 分享回来以后获取房间号
    if(room_id){
      window.localStorage.setItem('room_id',room_id)
      window.localStorage.setItem('pwd',GetQueryString('pwd'))
      location.href = 'http://view.lezhier.com/#/search'
    }

    window.localStorage.removeItem('player_id')

    window.localStorage.removeItem('num')
    window.localStorage.removeItem('code')
  },
  created(){
    let token = window.localStorage.getItem('token')
    var image= new Image()
    image.src="/static/img/back.89ee48f.png"
    var image1 = new Image()
    image1.src = "/static/img/front.26ca705.png"
    var image3= new Image()
    image3.src="/static/img/indexBg1.a32b7be.jpg"
    let userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
    if(!token){
      if(userInfo){
        this.$axios.post(this.urlList.authUrl + '/api/game/get_token',{openid:userInfo.openid}).then((tokenInfo)=>{
          window.localStorage.setItem("token",tokenInfo.data.token)
        })
      }else{
        alert('出错了！请重新进入')
        window.localStorage.clear()
      }
    }
  },
  mounted(){

  }
}
</script>

<style scoped>
  .container{
    height: 100%;
  }
  img{
    position: absolute;
    width:100%;
    height: 100%;
  }
  .block{
    width: 100%;
    position: absolute;
    text-align: center;
    margin: auto;
    bottom: 40px;
  }
  .rule{
    position: absolute;
    top: 44%;
    left: 50%;
    margin-left: -44%;
    width: 80%;
    background: #FFF;
    font-size: 10px;
    color: #909399;
    border: 1px solid #ccc;
    padding: 4%;
  }
  .el-button--success{
    font-weight: bold;
  }
</style>
